<template>
  <div class="comment">
    <h4>发表评论</h4>
    <textarea placeholder="尽情的BB吧" v-model="addcom"></textarea>
    <mt-button type="primary" size="large" @click="addcomment">发表评论</mt-button>
    <!-- 评论内容 -->
    <div class="com" v-for="(item, i) in com" :key="item.id">
      <div
        class="header"
      >第{{i+1}}楼&nbsp;&nbsp; 用户：{{item.user_name}}&nbsp;&nbsp;评论时间：{{item.add_time|gettime}}</div>
      <div class="body">{{item.content==undefined?'该用户未评论':item.content}}</div>
    </div>
    <!-- 点击加载更多，渲染更多，注意不能覆盖之前的数据 -->
    <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
// Toast提示不是全局变量，必须在使用的组件调用
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      index: 1,
      com: [],
      addcom: ""
    };
  },
  created() {
    this.getcomment();
  },
  methods: {
    getcomment() {
      // 需要当前新闻的id，采用父组件想子组件传值
      this.$http
        .get(`api/getcomments/${this.id}?pageindex=${this.index}`)
        .then(res => {
          // console.log(res.body.message);
          // 点击加载更多，不能覆盖之前的数据 ，所以采用concat（）拼接数组
          this.com = this.com.concat(res.body.message);
        });
    },
    getmore() {
      // 点击加载更多，index+1，并再次请求数据
      this.index++;
      this.getcomment();
    },
    // 添加评论,post请求有三个参数，url、参数{}、配置项(全局配置)
    // 若在点击添加评论前，我们点击过查看更多，则当前页index就会变为2，调用方法获取到的是第二页，然后拼接在当前评论后面
    // 解决方法：添加成功后手动拼接一个对象，unshift到评论数组中第一个，就能看到了
    addcomment() {
      // 检验评论是否为空
      if (this.addcom.trim() == "") {
        Toast("评论不能为空");
        return;
      }
      this.index = 1;
      this.$http
        .post(`api/postcomment/${this.id}`, { content: this.addcom })
        .then(res => {
          if (res.body.status == 0) {
            //  手动拼接一个数据，如果有登陆，用户名可以从session获取
            this.com.unshift({
              user_name: "曲曲",
              add_time: new Date(),
              content: this.addcom.trim()
            });
            this.addcom = "";
          }
          console.log(res);
        });
    }
  },
  // 第二步 子组件接收父组件的值
  props: ["id"]
};
</script>
<style lang="less" scoped>
.comment {
  h4 {
    margin: 25px 0 15px 0;
  }
  textarea {
    font-size: 14px;
    margin: 0;
  }
  .com {
    margin: 20px 0;
    .header {
      color: chocolate;
      background-color: rgb(221, 218, 218);
      font-size: 14px;
      padding: 5px 0;
      margin: 5px 0;
    }
  }
}
</style>